<template>
    <div class="">
        <el-card class="box-card">
            <el-input v-model="mobile" clearable @clear="clear" placeholder="请输入手机号" class="w200"></el-input>
            <el-select clearable @clear="clear"  v-model="type" placeholder="请选择验证码类别" class="w200">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-button type="primary" @click="search">查询</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="serial" label="序号" width="180" align="center"> </el-table-column>
                <el-table-column prop="mobile" label="手机号" width="180" align="center"> </el-table-column>
                <el-table-column prop="code" label="验证码" align="center"> </el-table-column>
                <el-table-column prop="category" label="类别" align="center"> </el-table-column>
                <el-table-column prop="time" label="创建时间" align="center"> </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryobj.pagenum"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="queryobj.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getVerification } from '@/api/member.js'
export default {
  name: 'verification',
  data () {
    return {
      queryobj: {
        pagenum: 1,
        pagesize: 20
      },
      form: {},
      // 数据的总条数
      total: 0,
      tableData: [],
      options: [],
      mobile: '',
      type: ''
    }
  },
  created () {
    this.getInfo()
  },
  mounted () {

  },
  methods: {
    async getInfo () {
      const { Data } = await getVerification({
        pageIndex: this.queryobj.pagenum,
        pageSize: this.queryobj.pagesize,
        mobile: this.mobile,
        type: this.type
      })
      this.total = Data.paging.totalItemCount
      this.tableData = Data.list
      this.options = Data.typeList
      console.log(Data)
    },
    // 页面size发生变化时
    handleSizeChange (newPageSize) {
      this.queryobj.pagesize = newPageSize
      //   console.log(newPageSize)
      this.getInfo()
    },

    // 当前处于第几页
    handleCurrentChange (newPageNum) {
      this.queryobj.pagenum = newPageNum
      //   console.log(newPageNum)
      this.getInfo()
    },

    search () {
      this.getInfo()
    },

    clear () {
      this.getInfo()
    }
  }
}
</script>

<style scoped>
.w200 {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
